<template>
    <el-dialog :visible="visible" :modal="true" :width="width" top="50px" :show-close="false" @open="openDialog"
        @close="closeDialog" append-to-body>

        <div class="content">
            <div class="list">
                <div class="search_view">
                    <el-input v-model="keywords" placeholder="请输入内容" @keyup.enter.native="openDialog"></el-input>
                </div>

                <div class="user_list">
                    <div class="item" v-for="(item, index) in allUser" :key="index" @click="picker(item)">


                        <img src="@/assets/image/checked.png" alt="" class="checkbox checked"
                            v-if="userIds.includes(item.friend_user_info.im_user_id) && isAdd == 0">

                        <img src="@/assets/image/checked.png" alt="" class="checkbox"
                            v-else-if="pickerIds.includes(item.friend_user_info.im_user_id)">
                        <img src="@/assets/image/checked_no.png" alt="" class="checkbox" v-else>


                        <img :src="item.friend_user_info.avatar" alt="" class="avatar">
                        <div class="user_name">{{ item.friend_user_info.nickname }}</div>
                    </div>
                </div>
            </div>
            <div class="select_list">
                <div class="title">
                    <span class="key">{{ $t('msg.选择联系人') }}</span>
                    <span class="value">{{ $t('msg.已选择') }}{{ pickerCount }}{{ $t('msg.个联系人') }}</span>
                </div>
                <div class="picker">
                    <div class="item" v-for="(item, index) in pickerUser" :key="index">
                        <img :src="item.friend_user_info.avatar" alt="" class="avatar">
                        <img src="@/assets/image/dele3.png" alt="" class="oper" @click="remove(index)"
                            v-if="!userIds.includes(item.friend_user_info.im_user_id)">
                        <div class="user_name">{{ item.friend_user_info.nickname }}</div>
                    </div>
                </div>
                <div class="footer">
                    <div class="submit" @click="manageGroup">{{ $t('msg.完成') }}</div>
                    <div class="cancel" @click="closeDialog">{{ $t('msg.取消') }}</div>
                </div>
            </div>
        </div>
    </el-dialog>
</template>
<script>
export default {
    name: "manageGroup",
    props: {

        // isAdd:1是创建群聊  0是添加群员
        isAdd: {
            type: Number,
            default: 0,
        },
        width: {
            type: String,
            default: '585px',
        },
        userIds: {
            type: Array,
            default: () => [],
        },
        groupId: {
            type: String,
            default: '',
        },
        title: {
            type: String,
            default: "创建群聊",
        },
        visible: {
            type: Boolean,
            default: false,
        },
    },
    data() {
        return {
            createChatTitles: ["用户列表", "已选用户"],
            selectUid: [],

            groupName: "",
            defaultProps: {
                key: "user_id",
                label: "realname",
                pinyin: "name_py"
            },

            allUser: [],
            keywords: "",

            pickerUser: [],
        };
    },
    computed: {
        pickerCount() {
            return this.pickerUser.length;
        },
        pickerIds() {
            return this.pickerUser.map(user => user.friend_user_info.im_user_id);
        }
    },
    async mounted() {
    },
    methods: {
        async openDialog() {
            let {
                list
            } = await this.$api.chatApi.friendAllList({
                keyword: this.keywords
            });
            this.allUser = list;
            if (this.userIds.length <= 0) return;

            let pickerUser = this.pickerUser;

            const userMap = new Map(pickerUser.map(user => [user.friend_user_info.im_user_id, user]));

            list.forEach(item => {
                const im_id = item.friend_user_info.im_user_id;
                if (this.userIds.includes(im_id)) userMap.set(im_id, item);
            })
            this.pickerUser = Array.from(userMap.values());
        },

        picker(user) {
            const im_id = user.friend_user_info.im_user_id;
            if (this.userIds.includes(im_id) && this.isAdd == 0) return;
            const pickerUser = this.pickerUser;
            const index = pickerUser.findIndex(item => item.friend_user_info.im_user_id == im_id);

            index < 0 ? pickerUser.push(user) : pickerUser.splice(index, 1);
            this.pickerUser = pickerUser;
        },
        remove(index) {
            this.pickerUser.splice(index, 1);
        },
        closeDialog() {
            this.$emit("update:visible", false);
            this.pickerUser = [];
        },
        manageGroup() {
            switch (this.isAdd) {
                case 0:
                    // 添加成员
                    if (this.pickerUser.length < 1) {
                        this.$message.error(this.$t('msg.请选择要添加的成员'));
                        return;
                    }
                    break;
                case 1:
                    // 创建群聊
                    if (this.pickerUser.length < 1) {
                        // this.$message.error("群聊人数不能少于2人");
                        this.$message.error(this.$t('msg.请选择要添加的成员'));
                        return;
                    }
                    // if (this.groupName == "" || this.groupName.length < 2 || this.groupName.length > 20) {
                    //     this.$message.error("请输入正确的群聊名称");
                    //     return;
                    // }
                    break;
                case 2:
                    if (this.selectUid.length != 1) {
                        this.$message.error("只能选择一位成员！");
                        return;
                    }
                    break;
            }
            let pickerIds = this.pickerIds;

            let arr = [];
            pickerIds.forEach(item => {
                if (!this.userIds.includes(item)) arr.push(item)
            })
            this.$emit("manageGroup", arr, this.isAdd);
        },
        // 获取所有人员列表
        getAllUser(data) {
            this.$api.imApi.getAllUserAPI(data).then(res => {
                const data = res.data;
                this.allUser = data;
            });
        },
    },
};
</script>

<style lang="scss" scoped>
:deep(.el-dialog__body) {
    padding: 0;
}

:deep(.el-dialog__header) {
    display: none;
}

.content {
    display: flex;
    height: 700px;

    .list {
        width: 284px;
        padding: 16px 0 24px;
        box-sizing: border-box;
        display: flex;
        flex-direction: column;

        .search_view {
            padding: 0 24px;
            box-sizing: border-box;
        }

        .user_list {
            flex: 1;
            overflow-y: auto;

            .item {
                width: 100%;
                padding: 6px 24px;
                box-sizing: border-box;
                display: flex;
                align-items: center;

                &:hover {
                    cursor: pointer;
                    background: #EDEDED;
                }

                .checkbox {
                    width: 16px;
                    height: 16px;

                    &.checked {
                        opacity: 0.5;
                    }
                }

                .avatar {
                    width: 40px;
                    height: 40px;
                    border-radius: 4px 4px 4px 4px;
                    margin: 0 8px;
                }

                .user_name {
                    flex: 1;
                    font-size: 18px;
                    color: #333333;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    white-space: nowrap;
                    word-break: break-all;
                }
            }
        }
    }

    .select_list {
        width: 300px;
        padding: 16px 24px;
        box-sizing: border-box;
        border-left: 1px solid #EDEDED;

        display: flex;
        flex-direction: column;
        justify-content: space-between;

        .title {
            display: flex;
            justify-content: space-between;
            align-items: center;

            .key {
                font-size: 16px;
                color: #333333;
            }

            .value {
                font-size: 14px;
                color: #7F7F7F;
            }
        }

        .picker {
            flex: 1;
            padding: 20px 0;
            box-sizing: border-box;
            display: flex;
            flex-wrap: wrap;
            // justify-content: space-between;
            overflow-y: auto;

            .item {
                width: 52px;
                height: 52px;
                margin-right: 9px;
                position: relative;

                &:nth-child(4n) {
                    margin-right: 0;
                }

                .avatar {
                    width: 52px;
                    height: 52px;
                    border-radius: 4px 4px 4px 4px;
                }

                .oper {
                    width: 10px;
                    height: 10px;
                    position: absolute;
                    right: 0;
                    top: 0;
                    z-index: 2;
                }

                .user_name {
                    flex: 1;
                    text-align: center;
                    font-size: 18px;
                    color: #333333;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    white-space: nowrap;
                    word-break: break-all;
                }
            }

        }

        .footer {
            display: flex;
            justify-content: space-between;


            .submit {
                width: 118px;
                height: 32px;
                line-height: 32px;
                text-align: center;
                font-size: 14px;
                color: #FFFFFF;
                cursor: pointer;

                background: #2273FF;
                border-radius: 8px 8px 8px 8px;
            }

            .cancel {
                width: 118px;
                height: 32px;
                font-size: 14px;
                color: #7F7F7F;
                border-radius: 8px 8px 8px 8px;
                border: 1px solid #2273FF;
                cursor: pointer;
                display: flex;
                justify-content: center;

                align-items: center;

            }

        }
    }
}
</style>